<template>
  <div>
    <div class="wb-main">
      <div class="wb-header">
        <el-input v-model="formData.searchValue" clearable class="wb-header-item" placeholder="请输入名称和客户代码" />
        <el-select
          v-model="formData.userId"
          placeholder="请选择业务员"
          class="wb-header-item"
          clearable
        >
          <el-option
            v-for="item in roleList"
            :key="item.id + 'role'"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="formData.type"
          placeholder="请选择活跃度"
          class="wb-header-item"
          clearable
        >
          <el-option
            v-for="item in typeList"
            :key="item.code + 'form'"
            :label="item.name"
            :value="item.code"
          />
        </el-select>

        <el-select
          v-model="formData.productModule"
          placeholder="请选择模板"
          class="wb-header-item"
          clearable
        >
          <el-option
            v-for="item in templateList"
            :key="item.id + 'role'"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-button size="mini" class="wb-header-btn" @click="onSearchBtn">搜索</el-button>
        <el-button size="mini" class="wb-header-btn" type="primary" @click="addCustomer">新增</el-button>
      </div>
      <div class="wb-table-wrap">
        <el-table
          v-loading="loading"
          class="wb-table"
          border
          :data="dataSource"
        >
          <!-- <el-table-column label="序号" type="index" width="90px" /> -->
          <el-table-column label="客户code" type="code" />
          <el-table-column label="店铺名称" prop="name" min-width="150px" show-overflow-tooltip />
          <el-table-column label="省市区" width="150px" align="center">
            <template slot-scope="scope">
              {{ scope.row.province+scope.row.city +scope.row.region }}
            </template>
          </el-table-column>
          <el-table-column label="具体地址" prop="address" show-overflow-tooltip />
          <el-table-column label="店铺联系人" prop="contact" show-overflow-tooltip />

          <el-table-column label="法人" prop="legalPerson" show-overflow-tooltip />

          <el-table-column label="身份证正面照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.idCardPositive)"
                :preview-src-list="[jointURL(scope.row.idCardPositive)]"
              />
            </template>
          </el-table-column>

          <el-table-column label="身份证反面照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.idCardBack)"
                :preview-src-list="[jointURL(scope.row.idCardBack)]"
              />
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="150px" prop="idCard" show-overflow-tooltip />
          <el-table-column label="身份证有效期" width="150px" prop="idCardPeriod" show-overflow-tooltip />

          <el-table-column label="营业执照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.license)"
                :preview-src-list="[jointURL(scope.row.license)]"
              />
            </template>
          </el-table-column>
          <el-table-column label="税号" prop="taxNumber" show-overflow-tooltip />
          <el-table-column label="营业执照有效期" prop="licensePeriod" show-overflow-tooltip />
          <el-table-column label="余额" prop="surplus" show-overflow-tooltip />

          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">

              <el-button-group>
                <el-tooltip effect="dark" content="详情" placement="top">
                  <el-button icon="el-icon-orange" size="mini" @click="openDetailsDiglog(scope.row)" />
                </el-tooltip>

                <el-tooltip effect="dark" content="编辑" placement="top">
                  <el-button icon="el-icon-edit" size="mini" @click="goToEdit(scope.row)" />
                </el-tooltip>

                <el-tooltip effect="dark" content="删除" placement="top">
                  <el-button icon="el-icon-delete" size="mini" @click="deleteBtn(scope.row)" />
                </el-tooltip>

                <el-tooltip v-if="scope.row.status == 1" effect="dark" content="启用账户" placement="top">
                  <el-button size="mini" icon="el-icon-unlock" @click="goToEdit(scope.row)" />
                </el-tooltip>

                <el-tooltip v-else effect="dark" content="禁用账户" placement="top">
                  <el-button icon="el-icon-lock" size="mini" @click="goToEdit(scope.row)" />
                </el-tooltip>

                <el-tooltip effect="dark" content="余额" placement="top">
                  <el-button icon="el-icon-goods" size="mini" @click="setBalance(scope.row)" />
                </el-tooltip>

                <el-tooltip effect="dark" content="分配业务员" placement="top">
                  <el-button icon="el-icon-user" size="mini" @click="setSalesManId(scope.row)" />
                </el-tooltip>

              </el-button-group>

            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-if="page.total>10"
            :page-sizes="[10, 50, 100, 200]"
            :current-page.sync="page.pageNum"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <customer-details ref="customerDetails" :data="editData" @callBack="submitCustomerBtn" />

    <t-prompt
      ref="salesmanPrompt"
      key="sales"
      spec="2"

      prompt-title="分配业务员"
      :append-to-body="true"
      :is-validation="true"
      @submitBtn="salesmanSubmitBtn"
    >
      <el-form ref="salesForm" :model="salesmanFormData" label-width="100px" :rules="rules">
        <el-form-item label="业务员:" prop="salesManId">
          <el-select v-model="salesmanFormData.salesManId" placeholder="请选择业务员">
            <el-option
              v-for="item in roleList"
              :key="item.id + 'role'"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

      </el-form>
    </t-prompt>

  </div>
</template>

<script>
import { customerList, customerDelete, createCustomer, customerUpdateBalance, customerUpdateSales } from '@/api/customer'
import TPrompt from '@/components/TPrompt/index.vue'
import CustomerDetails from './components/customerDetails.vue'
export default {
  components: {
    TPrompt,
    CustomerDetails
  },
  data() {
    return {
      formData: {
        searchValue: '',
        userId: null,
        productModule: null,
        type: null
      },
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      dataSource: [],
      typeList: [
        {
          name: '客户活跃度',
          code: 1
        },
        {
          name: '非活跃客户',
          code: 2
        }
      ],

      roleList: [],
      templateList: [],
      loading: false,
      editData: null,
      // 设置业务员
      salesmanFormData: {
        salesManId: null,
        id: null
      },
      rules: {
        salesManId: {
          required: true, message: '请选择业务员', trigger: 'blur'
        }
      }
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    // 新增
    addCustomer() {
      this.editData = null
      this.$refs.customerDetails.openDiglog()
    },
    submitCustomerBtn(formData) {
      const loading = this.$loading({
        lock: true,
        text: '加载中...'
      })
      createCustomer(formData).then(() => {
        if (formData.id) {
          this.$message.success('更新成功')
        } else {
          this.$message.success('新增成功')
        }

        loading.close()
        this.onSearchBtn()
      }).catch(() => {
        loading.close()
      })
      console.log('formData----x-x---->', formData)
    },
    jointURL(url) {
      return process.env.VUE_APP_BASE_API + url
    },
    getListData() {
      const formData = {
        ...this.page,
        ...this.formData
      }
      this.loading = true
      customerList(formData).then((res) => {
        this.loading = false
        const records = res.data.records
        this.dataSource = records
        this.page.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = {
        ...this.page,
        pageNum: 1,
        pageSize: val
      }
      this.getListData()
    },
    handleCurrentChange(val) {
      this.page = {
        ...this.page,
        pageNum: val
      }
      this.getListData()
    },
    operationBtn(row, type) {
      const data = {
        status: 1,
        id: row.id
      }
      // this.$confirm('是否同意审核', '温馨提示', { confirmButtonText: '同意', 'cancelButtonText': '驳回' }).then(() => {
      //   customerPending(data).then(() => {
      //     this.onSearchBtn()
      //     this.$message.success('审批同意成功')
      //   })
      // }).catch(() => {
      //   data.status = 2
      //   customerPending(data).then(() => {
      //     this.onSearchBtn()
      //     this.$message.success('审批驳回成功!')
      //   })
      // })
    },
    onSearchBtn() {
      this.page.pageNum = 1
      this.getListData()
    },
    // 详情
    openDetailsDiglog() {
      // this.$refs.prompt.openDiglog()
    },
    goToEdit(data) {
      this.editData = data
      this.$refs.customerDetails.openDiglog()
    },

    // 设置余额
    setBalance(data) {
      const id = data.id
      this.$prompt('设置余额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]*$/,
        inputErrorMessage: '只能输入数字'
      }).then(({ value }) => {
        const data = {
          balance: value,
          id
        }
        customerUpdateBalance(data).then(() => {
          this.$message({
            type: 'success',
            message: '余额设置成功'
          })
          this.onSearchBtn()
        })
      })
    },
    setSalesManId(data) {
      this.salesmanFormData.id = data.id
      this.salesmanFormData.salesManId = null
      this.$refs.salesmanPrompt.openDiglog()
    },
    // 设置业务员
    salesmanSubmitBtn() {
      this.$refs.salesForm.validate((valid) => {
        if (valid) {
          customerUpdateSales(this.salesmanFormData).then(() => {
            this.$message({
              type: 'success',
              message: '分配业务员成功'
            })
            this.$refs.salesmanPrompt.cancelBtn()
            this.onSearchBtn()
          })
        }
      })
    },
    // 删除客户
    deleteBtn(row) {
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        customerDelete(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearchBtn()
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
